<template>
  <div>
    <div v-show="flag">
      <el-empty description="暂无数据"
                :image-size="400"
                image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE.png">

      </el-empty>
    </div>
    <div v-show="noticeList.length>0">
      <div class="hea">消息通知</div>
      <div>
        <el-table
          :data="noticeList"
          class="tab"
          max-height="560">
          <el-table-column prop="noticeContext" label="通知内容" width="400"/>
          <el-table-column prop="operatorName" label="发布人"/>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status===1?'info':'danger'">{{ scope.row.status === 1 ? '已读' : '未读' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="200"/>
          <el-table-column fixed="right" label="操作" width="160" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="detail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="yy">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size=10
                         style="text-align: center; margin-top: 10px"
                         :current-page="this.currentPage" @current-change="setCurrentPage">
          </el-pagination>
        </el-row>
      </div>
    </div>
    <el-dialog
      title="通知详情"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-descriptions>
        <el-descriptions-item label="发布人" span="3">
          <span>{{ temp.operatorName }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="发布时间" span="3">
          <span>{{ temp.createTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="通知内容" span="3">
          <span>{{ temp.noticeContext }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="centerDialogVisible = false; temp = {}">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      noticeList: [],
      temp: {},
      flag: false,
      currentPage: 1,
      total: 0,
      centerDialogVisible: false
    }
  },
  created() {
    this.getNotice();
  },
  methods: {
    setCurrentPage(param) {
      this.currentPage = param;
      this.getNotice();
    },
    detail(row) {
      this.temp = row;
      this.centerDialogVisible = true;
      if (row.status === 0) {
        this.readById(row.id);
      }
    },
    readById(id) {
      const token = JSON.parse(localStorage.getItem("loginMes")).token;
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/notice-user/read", {
          id: id
        }, {
          headers: {
            token: token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.getNotice();
            this.$message.success(res.data.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    getNotice() {
      const token = JSON.parse(localStorage.getItem("loginMes")).token;
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/notice-user/list",{
          currentPage: this.currentPage,
          totalPage: 10
        }, {
          headers: {
            token: token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.noticeList = res.data.data;
            this.total = res.data.total;
            if (this.noticeList.length === 0) {
              this.flag = true;
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.hea {
  font-weight: bold;
  font-size: 24px;
  color: palevioletred;
  margin-left: 50px;
  border-bottom: #d9d9d9 solid 2px;
}

.tab {
  width: 95%;
  border-radius: 9px;
  margin-left: 3%;
  margin-top: 1.5%;
  height: 650px;
  overflow-y: auto
}

span {
  margin-left: 10px;
  color: cornflowerblue;
}
</style>
